<template>
  <div class="classify">
    <div class="sidebar">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item :title="fica.name" v-for="fica in ficationList" :key="fica.id" @click="getLefttitle(fica.id)" />
      </van-sidebar>
    </div>
    <div class="Subsetclassification">
      <img :src="banner_url" style="width:100%">
      <div class="fication">
        <div class="spanlist">
          <span class="span1">居家</span>
        </div>
        <div class="Subsetclasslist">
          <div class="Subsetclass" v-for="sub in currentCategory1" :key="sub.id">
            <img :src="sub.wap_banner_url">
            <span>{{sub.name}}</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'category',
  data() {
    return {
      activeKey: 0,
      //分类子集的数据
      currentCategory1: [],
      //图片
      banner_url: ''
    }
  },
  computed: {
    ...mapState({
      ficationList: state => state.login.ficationList.categoryList,
      currentCategory: state => state.login.ficationList.currentCategory
    })
  },
  mounted() {
    this.getAllclassificationList()
  },
  methods: {
    getAllclassificationList() {
      this.$store.dispatch('getAllclassificationList')
      setTimeout(() => {
        this.currentCategory1 = this.$store.state.login.ficationList.currentCategory.subCategoryList
        this.banner_url = this.$store.state.login.ficationList.currentCategory.banner_url
      }, 500)
    },
    getLefttitle(id) {
      this.$store.dispatch('getCurrentclassificationList', id)
      this.currentCategory1 = ''
      this.banner_url = ''
      setTimeout(() => {
        this.currentCategory1 = this.$store.state.login.Currentclassi.subCategoryList
        this.banner_url = this.$store.state.login.Currentclassi.banner_url
      }, 100)
    }
  }
}
</script>

<style lang="less" scoped>
.classify {
  display: flex;

  .sidebar {
  }
  .Subsetclassification {
    width: 100%;
    .fication {
      display: flex;

      flex-direction: column;

      .spanlist {
        background-color: #fff;
        padding: 5% 0%;
        .span1 {
          display: flex;
          justify-content: center;
        }
      }
      .Subsetclasslist {
        display: flex;
        flex-wrap: wrap;
        .Subsetclass {
          display: flex;
          flex-direction: column;

          background-color: #fff;
          padding: 5% 2%;

          width: 20.4%;
          border: 0.001rem solid #e5e5e5;
          img {
            display: block;
            margin-left: 25%;
            width: 50%;
          }
          span {
            justify-content: center;
            display: flex;
            font-size: 0.12rem;
          }
        }
      }
    }
  }
}
</style>